// @ts-nocheck
/*
 * @Descripttion: 胡腾辉 | feico
 * @version: V1.0
 * @Author: feico
 * @Date: 2022-02-20 18:00:40
 * @LastEditors: feico
 * @LastEditTime: 2022-02-23 17:04:21
 */
import React,{useEffect,useRef} from 'react'
import { Link,useHistory } from 'react-router-dom'
import { useDispatch,useSelector } from 'react-redux'
import { Card,Breadcrumb,Form,Button,Radio,Select,DatePicker,Table,Tag,Image,Space,Popconfirm, message} from 'antd'
import {EditOutlined,DeleteOutlined} from '@ant-design/icons'
import styles from './index.module.scss'
import {getChannel,getArticleList,delArticlebyId} from '../../store/action/article'
import defaultImg from '../../assets/error.png'

export default function Article() {
    const history = useHistory()
    const dispatch = useDispatch()
    const channels = useSelector((state)=>state.article.channels)
    const articlelist = useSelector((state)=>state.article.articles)
    const params = useRef({})
    useEffect(()=>{
        dispatch(getChannel())
        dispatch(getArticleList())
    },[dispatch])
    const onFinish = (values) => {
        // const params = {}
        if (values.status !== -1) {
            params.current.status = values.status
        }
        if (values.channel_id) {
            params.current.channel_id = values.channel_id
        }
        if (values.date) {
            params.current.begin_pubdate = values.date[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
            params.current.end_pubdate = values.date[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')
        }
        params.current.page = 1
        dispatch(getArticleList(params.current))
    }
    const delArticle=async(id)=>{
        console.log(id);
        await dispatch(delArticlebyId(id))
        await dispatch(getArticleList(params.current))
        message.success('删除成功')
    }
    const STATUS = [
        { id: -1, title: '全部', color: 'magenta' },
        { id: 0, title: '草稿', color: 'red' },
        { id: 1, title: '待审核', color: 'volcano' },
        { id: 2, title: '审核通过', color: 'lime' },
        { id: 3, title: '审核失败', color: 'gold' },
    ]
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            key: 'cover',
            render(cover){
                return  <Image 
                    width={200}
                    height={150}
                    src={cover.images[0] || defaultImg}
                    />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render:(status)=>{
                const obj = STATUS.find(item=>item.id===status)
                return <Tag color={obj.color}>{obj.title}</Tag>
            }
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate',
            key: 'pubdate',
        },
        {
            title: '阅读数',
            dataIndex: 'read_count',
            key: 'read_count',
        },
        {
            title: '评论数',
            dataIndex: 'comment_count',
            key: 'comment_count',
        },
        {
            title: '点赞数',
            dataIndex: 'like_count',
            key: 'like_count',
        },
        {
            title: '操作',
            key: 'id',
            render(id){
                return (
                    <Space>
                        <Button type='primary' shape='circle' icon={<EditOutlined/>} onClick={()=>history.push(`/home/publish/${id.id}`)}></Button>
                        <Popconfirm title='确定删除该文章吗？' onConfirm={()=>delArticle(id.id)}>
                        <Button type='primary' shape='circle' danger  icon={<DeleteOutlined />}></Button>
                        </Popconfirm>
                    </Space>
                )
            }
        },
    ]
return (
<div>
<div className={styles.root}>
<Card title={
<Breadcrumb>
    <Breadcrumb.Item>
    <Link to='/home'>首页</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>内容管理</Breadcrumb.Item>
</Breadcrumb>
}>
<Form initialValues={{ status: -1 }}  onFinish={onFinish}>
<Form.Item label='状态' name='status'>
        <Radio.Group>
            {STATUS.map(item=>(
                <Radio key={item.id} value={item.id}>{item.title}</Radio>
            ))}
        </Radio.Group>
</Form.Item>
<Form.Item label='频道' name='channel_id'>
    <Select placeholder='请选择频道' style={{ width: 200 }}>
        {channels.map((item)=>(
            <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
        ))}
    </Select>
</Form.Item>
<Form.Item label='日期' name='date'>
    <DatePicker.RangePicker />
</Form.Item>
    <Form.Item>
    <Button type='primary' htmlType='submit'>
        筛选
    </Button>
    </Form.Item>
</Form>
 </Card>
 <Card title={`根据筛选条件共查询到${articlelist.total_count }条结果:`} style={{ marginTop: 10 }}>
    <Table rowKey='id' dataSource={articlelist.results} columns={columns} pagination={{
        position: ['bottomRight'],
        total: articlelist.total_count,
        pageSize: articlelist.per_page,
        current: articlelist.page,
        onChange(page, pageSize) {
            // #4
            params.current.page = page
            params.current.per_page = pageSize
            dispatch(getArticleList(params.current))
        },
    }} />
</Card>
         </div>
         </div>
            )
    }